<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - GSAP路由动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
        }

        .layout {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .header {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            padding: 0 2rem;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 100;
        }

        .nav {
            display: flex;
            gap: 0.5rem;
            height: 60px;
            align-items: center;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            padding: 0.5rem 1.2rem;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
            align-items: center;
        }

        .nav-link:hover {
            color: white;
        }

        .nav-link.active {
            color: white;
            background: rgba(255, 255, 255, 0.15);
        }

        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            background: #4facfe;
            border-radius: 50%;
        }

        .main-content {
            flex: 1;
            padding: 2rem;
            background-color: white;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .page-title {
            margin-bottom: 1.5rem;
            color: #2a5298;
        }

        .content {
            line-height: 1.6;
        }
    </style>
</head>
<body>
<div class="layout">
    <header class="header">
        <nav class="nav" id="mainNav">
            <a href="#dashboard" class="nav-link active" data-page="dashboard">控制台</a>
            <a href="#users" class="nav-link" data-page="users">用户管理</a>
            <a href="#orders" class="nav-link" data-page="orders">订单管理</a>
            <a href="#settings" class="nav-link" data-page="settings">系统设置</a>
        </nav>
    </header>

    <main class="main-content">
        <h1 class="page-title" id="pageTitle">控制台</h1>
        <div class="content" id="pageContent">
            <p>这里是控制台页面内容。点击上方导航标签可以查看页面切换动画效果。</p>
        </div>
    </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const navLinks = document.querySelectorAll('.nav-link');
        const pageTitle = document.getElementById('pageTitle');
        const pageContent = document.getElementById('pageContent');

        // 页面内容数据
        const pages = {
            dashboard: {
                title: '控制台',
                content: '<p>这里是控制台页面内容。您可以查看系统概览和关键指标。</p><p>今日活跃用户: 1,245</p><p>新增订单: 86</p>'
            },
            users: {
                title: '用户管理',
                content: '<p>用户管理页面。您可以在此管理所有用户账户。</p><ul><li>用户列表</li><li>权限设置</li><li>角色管理</li></ul>'
            },
            orders: {
                title: '订单管理',
                content: '<p>订单管理页面。查看和处理系统订单。</p><div style="display:flex;gap:1rem;margin-top:1rem;"><div style="padding:1rem;background:#f0f4f8;border-radius:6px;"><h3>待处理</h3><p>24 个订单</p></div><div style="padding:1rem;background:#f0f4f8;border-radius:6px;"><h3>已发货</h3><p>156 个订单</p></div></div>'
            },
            settings: {
                title: '系统设置',
                content: '<p>系统配置页面。请谨慎修改以下设置：</p><form style="margin-top:1rem;"><div style="margin-bottom:1rem;"><label>系统名称</label><input type="text" style="display:block;width:100%;padding:0.5rem;margin-top:0.5rem;border:1px solid #ddd;border-radius:4px;"></div><div style="margin-bottom:1rem;"><label>时区设置</label><select style="display:block;width:100%;padding:0.5rem;margin-top:0.5rem;border:1px solid #ddd;border-radius:4px;"><option>UTC+8 北京时间</option></select></div><button type="button" style="padding:0.5rem 1rem;background:#2a5298;color:white;border:none;border-radius:4px;">保存设置</button></form>'
            }
        };

        // 初始加载动画
        gsap.from(navLinks, {
            opacity: 0,
            y: -20,
            duration: 0.6,
            stagger: 0.1,
            ease: "back.out(1.2)",
            delay: 0.3
        });

        // 为每个导航链接添加事件监听
        navLinks.forEach(link => {
            // 鼠标悬停效果
            link.addEventListener('mouseenter', () => {
                if (!link.classList.contains('active')) {
                    gsap.to(link, {
                        color: 'white',
                        scale: 1.05,
                        duration: 0.2
                    });
                }
            });

            link.addEventListener('mouseleave', () => {
                if (!link.classList.contains('active')) {
                    gsap.to(link, {
                        color: 'rgba(255, 255, 255, 0.8)',
                        scale: 1,
                        duration: 0.2
                    });
                }
            });

            // 点击切换页面
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const page = link.getAttribute('data-page');

                // 如果点击的是当前活动链接，不做任何事
                if (link.classList.contains('active')) return;

                // 获取当前活动链接
                const currentActive = document.querySelector('.nav-link.active');
                const currentIndex = Array.from(navLinks).indexOf(currentActive);
                const newIndex = Array.from(navLinks).indexOf(link);

                // 执行切换动画
                animatePageChange(currentActive, link, currentIndex, newIndex, page);
            });
        });

        // 页面切换动画函数
        function animatePageChange(oldLink, newLink, oldIndex, newIndex, page) {
            // 旧链接动画 - 缩小并褪色
            gsap.to(oldLink, {
                scale: 0.95,
                color: 'rgba(255, 255, 255, 0.6)',
                duration: 0.3,
                ease: "power2.in",
                onComplete: () => {
                    oldLink.classList.remove('active');
                }
            });

            // 新链接动画 - 从下方弹入
            gsap.fromTo(newLink,
                {
                    y: 10,
                    opacity: 0.7,
                    scale: 0.9
                },
                {
                    y: 0,
                    opacity: 1,
                    scale: 1,
                    color: 'white',
                    duration: 0.5,
                    ease: "back.out(1.7)",
                    onStart: () => {
                        newLink.classList.add('active');
                    }
                }
            );

            // 页面内容动画
            gsap.to([pageTitle, pageContent], {
                opacity: 0,
                y: 20,
                duration: 0.3,
                ease: "power1.in",
                onComplete: () => {
                    // 更新页面内容
                    pageTitle.textContent = pages[page].title;
                    pageContent.innerHTML = pages[page].content;

                    // 新内容入场动画
                    gsap.fromTo([pageTitle, pageContent],
                        {
                            opacity: 0,
                            y: -20
                        },
                        {
                            opacity: 1,
                            y: 0,
                            duration: 0.5,
                            ease: "back.out(1.2)"
                        }
                    );
                }
            });

            // 如果是从右向左切换，添加额外的水平动画
            if (newIndex > oldIndex) {
                gsap.from(newLink, {
                    x: 20,
                    duration: 0.4,
                    ease: "power2.out"
                });
            } else if (newIndex < oldIndex) {
                gsap.from(newLink, {
                    x: -20,
                    duration: 0.4,
                    ease: "power2.out"
                });
            }
        }

        // 处理URL哈希变化
        window.addEventListener('hashchange', () => {
            const hash = window.location.hash.substring(1);
            const targetLink = document.querySelector(`.nav-link[data-page="${hash}"]`);

            if (targetLink && !targetLink.classList.contains('active')) {
                targetLink.click();
            }
        });

        // 初始加载时检查哈希
        if (window.location.hash) {
            const initialHash = window.location.hash.substring(1);
            const initialLink = document.querySelector(`.nav-link[data-page="${initialHash}"]`);

            if (initialLink) {
                // 移除默认的active类
                document.querySelector('.nav-link.active').classList.remove('active');

                // 添加新的active类并更新内容
                initialLink.classList.add('active');
                pageTitle.textContent = pages[initialHash].title;
                pageContent.innerHTML = pages[initialHash].content;
            }
        }
    });
</script>
</body>
</html>
